<template>
	<div class="footer">
		<!-- 团队 -->
		<ul class="team">
			<li v-for="team in footerTeamList" :key="team.id">
				<a class="item" href="https://www.tencentmusic.com/">
					<div
						class="teamBgImg"
						:style="{
							background: `url(${team.cover}) no-repeat`,
							backgroundSize: '100%',
						}"></div>
					<p class="pItem">{{ team.teamName }}</p>
				</a>
			</li>
		</ul>

		<div class="about">
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗</div>
		</div>
		<div class="about">
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗</div>
		</div>
		<div class="about">
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗 <span>|</span>&nbsp;</div>
			<div>关于酷狗</div>
		</div>
		<div class="about">
			<div>Copyright © 2004-2023 KuGou-Inc.All Rights Reserved</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { reqNav } from "@/api/home";

import type { teamListData } from "@/type/nav";

const footerTeamList = ref<teamListData>([]);

const getFooterList = async () => {
	try {
		const res = await reqNav();
		// @ts-ignore
		footerTeamList.value = res[2].teamList;
		// console.log("footerTeamList.value", footerTeamList.value);
	} catch (error) {
		alert("获取登录nav数据失败");
	}
};

onMounted(async () => {
	await getFooterList();
});
</script>

<style scoped lang="less">
.footer {
	width: 100%;
	height: 386px;
	background-color: #2c323b;

	.team {
		display: flex;
		flex-direction: row;
		list-style: none;
		justify-content: center;
		padding-top: 40px;
		padding-bottom: 60px;
		// border: 1px solid red;
		.item {
			display: flex;
			// width: 96px;
			flex-direction: column;
			align-items: center;
			color: white;
			margin-right: 10px;
			text-decoration: none;
			// height: 86px;
			// border: 1px solid blue;
			// font-size: 15px;
			.teamBgImg {
				width: 70px;
				height: 70px;
				// background: url(https://www.kugou.com/common/images/icon_cmfoot_tme.png) no-repeat;
				// background-size: 100%;
			}
			.pItem {
				margin: 0;
				padding: 0;
			}
		}
	}
	.about {
		display: flex;
		justify-content: center;
		color: #fff;
		font-size: 13px;
		margin-bottom: 20px;
	}
}
</style>
